<template>
  <div class="app-container">
    <el-row :gutter="80">
      <!-- <el-col :span="24" style="border-right: 1px solid #ddd; min-height: 600px;"> -->
      <el-col :span="10" style="min-height: 600px;">
        <div class="function-col">
          <div class="btn-list">
            <el-button class="opt-btn" type="default" plain @click="refresh"><svg-icon icon-class="refresh"/> 刷新</el-button>
            <el-button class="opt-btn" type="success" @click="add()"><svg-icon icon-class="add"/> 新增</el-button>
          </div>
          <el-tree
            ref="resTree"
            :is-loading="treeLoading"
            :data="treeData"
            :props="treeProps"
            :highlight-current="true"
            :default-expand-all="false"
            :expand-on-click-node="false"
            node-key="id"
            class="tree-container">
            <span slot-scope="{ node, data }" class="tree-node">
              <span>{{ node.label }}</span>
              <span>
                <span class="opt-btn" @click="add(node, data)"><svg-icon icon-class="add"/></span>
                <span class="opt-btn" @click="edit(node, data)"><svg-icon icon-class="pencil"/></span>
                <span class="opt-btn" circle @click="del(node, data)"><svg-icon icon-class="minus"/></span>
                <!-- <span class="opt-btn" circle @click="toggleHidden(node, data)"><i class="el-icon-view"/></span> -->
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
    </el-row>
    <add-edit-dialog ref="editDialog" :loading="isEditSubmitting" @ok="handleOk"/>
  </div>
</template>

<script>

import DelBoxMixin from '@/mixins/delBox'

import { getBrandTree, brandAdd, brandUpdate, brandDel } from '@/api/base/brand'
import addEditDialog from './add-edit'

export default {

  components: {
    addEditDialog
  },

  mixins: [DelBoxMixin],

  data() {
    return {
      treeLoading: false,

      isEditSubmitting: false,
      treeData: [],
      dataOptions: [],
      selectedNode: null,

      treeProps: {
        label: 'name'
      }
    }
  },

  mounted() {
    this.refresh()
  },

  methods: {

    refresh() {
      this.treeLoading = true
      getBrandTree({ type: 2 }).then(resp => {
        this.treeLoading = false
        this.treeData = resp.data
      }).catch(resp => {
        this.treeLoading = false
        this.$message.error(resp.message)
      })
    },

    add(node, data) {
      let pdata = null
      this.selectedNode = node
      if (data && data.parentId != null) {
        const pnode = this.$refs.resTree.getNode(data.parentId)
        pdata = pnode ? pnode.data : null
      }
      this.$refs.editDialog.show(null, pdata)
    },

    edit(node, data) {
      this.selectedNode = node
      let pdata = null
      if (data && data.parentId != null) {
        const pnode = this.$refs.resTree.getNode(data.parentId)
        pdata = pnode ? pnode.data : null
      }
      this.$refs.editDialog.show(data, pdata)
    },

    del(node, data) {
      this.$$delBox().then(() => {
        brandDel({
          id: data.id
        }).then(resp => {
          console.log(node, data)
          this.$message.success(resp.message)
          this.$refs.resTree.remove(node)
        }).catch(resp => {
          this.$message.error(resp.message)
        })
      }).catch(() => {})
    },

    // toggleHidden(node, data) {
    //   brandToggleHidden({
    //     funcId: data.id,
    //     hidden: !node.data.hidden
    //   }).then(resp => {
    //     this.$message.success(resp.message)
    //     this.$refs.resTree.remove(node)
    //   }).catch(resp => {
    //     this.$message.error(resp.message)
    //   })
    // },

    getDataOptions(data = []) {
      const dt = []
      let item
      for (const d of data) {
        item = {
          id: d.id,
          label: d.label,
          value: d.id
        }

        if (d.children && !d.children[0]) {
          // delete d.children
        } else {
          item.children = this.getDataOptions(d.children)
        }
        dt.push(item)
      }

      return dt
    },

    handleOk(data, isEdit) {
      if (!isEdit) {
        this.processAdd(data)
      } else if (isEdit) {
        this.processEdit(data)
      }
    },

    processAdd(data) {
      this.isEditSubmitting = true
      if (this.selectedNode && this.selectedNode.data) {
        data.parentId = this.selectedNode.data.id
      }

      brandAdd(data).then(resp => {
        this.$refs.editDialog.close()
        const dt = resp.data || data
        if (this.selectedNode && this.selectedNode.data) {
          dt.label = dt.name
          dt.data = {
            type: dt.type,
            sortNo: dt.sortNo
          }

          const datas = this.selectedNode.data.children || []
          datas.push(dt)
          datas.sort((a, b) => {
            const rt = (a.data || a).sortNo - (b.data || b).sortNo

            if (rt === 0) {
              return a.name - b.name
            }

            return rt
          })
          this.selectedNode.data.children = datas
        } else {
          this.refresh()
        }
        this.$message.success(resp.message)
        this.isEditSubmitting = false
      }).catch(resp => {
        this.isEditSubmitting = false
        this.$message.error(resp.message)
      })
    },

    processEdit(data) {
      brandUpdate(data).then(resp => {
        // close form dialog
        this.$refs.editDialog.close()
        const dt = resp.data || data
        if (this.selectedNode && this.selectedNode.data) {
          dt.label = dt.name
          dt.data = {
            type: dt.type,
            sortNo: dt.sortNo
          }

          dt.children = this.selectedNode.data.children

          this.selectedNode.data = dt
        } else {
          this.refresh()
        }
        this.$message.success(resp.message)
      }).catch(resp => {
        this.$message.error(resp.message)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail-title{
  line-height: 50px;
  color: #666;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px dashed #ddd;
}
.function-col{
  padding: 20px;
  border-radius: 4px;
  min-height: 500px;
  border: 1px solid #ddd;
  transition: box-shadow .2s;
  &:hover{
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1)
  }

  .btn-list {
    text-align: right;
  }

  .btn-list::after {
    content: "";
    display: block;
    padding: 10px;
  }
}
</style>

<style lang="scss">
.function-tree{
  &>.el-tree-node{
    &>.el-tree-node__content{
        border-top: 1px solid #f1f1f1;
      &>.el-tree-node__expand-icon{
        display: none !important;
      }
      &>.function-tree-node {
        padding-left: 10px;
      }
    }
    &:first-child{
      &>.el-tree-node__content{
        border-top: none;
      }
    }
  }
  .el-tree-node{
      &>.el-tree-node__content{
          height: 50px;
          .el-tree-node__expand-icon{
              font-size: 16px;
          }
      }
  }
  .function-tree-node{
      font-size: 14px;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      padding-right: 15px;
      .rightBtn{
        // display: none;
      }
      &.custom-tree-node--is-active>.rightBtn{
        display: block;
      }
      .text-danger{
        color: #f56c6c;
      }
  }
}
</style>
